<template>
  <div class="content">
    <!-- 头部组件 -->
    <megaBox />

    <!-- 内容部分 -->
    <div class="body">

      <!-- 地震概率分布 -->
      <dv-border-box-6>
      <heat-map-echarts height="580px" width="550px" />
      </dv-border-box-6>

      <!-- 地震概率分布监测表 -->
      <dv-border-box-10>
        <div style="padding: 5px">
          <dv-scroll-board :config="EarthquakeProbability" style="height: 250px" />
        </div>
      </dv-border-box-10>

    </div>
  </div>
</template>

<script>
import heatMapEcharts from "./echarts/heatMapEcharts.vue";
import megaBox from "./megaBox.vue"
export default {
  components: { heatMapEcharts,megaBox },
  data() {
    return {
      EarthquakeProbability: {
        header: ["城市", "首要污染物", "等级", "AQI"],
        data: [
          ["渝北区", "——", "优", 34],
          ["万州区", "——", "优", 31],
          ["巴南区", "O3", "轻度污染", 94],
          ["江北区", "PM2.5", "良", 52],
          ["渝北区", "——", "优", 34],
          ["万州区", "——", "优", 31],
          ["巴南区", "O3", "轻度污染", 94],
          ["江北区", "PM2.5", "良", 52],
        ],
      },
    };
  },
};
</script>

<style scoped>
.content {
  width: 30%;
}
.body {
  margin-top: 10px;
}
</style>
